import React, { useEffect, useMemo, useState } from 'react'
import styles from '../css分支/Pingjia.module.css'
import { Arrow, ChatO, Circle } from '@react-vant/icons';
import { Grid, Image, Tabs, Rate, Space, Button, Checkbox } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { ArrowLeft, BalanceO, Points, AppsO } from '@react-vant/icons';

export default function Pingjia() {
    const navigate = useNavigate()
    const [value, setValue] = useState(4.5);
    const [value1, setValue1] = useState(4);
    const [value2, setValue2] = useState(5);
    const items = ['未回复的评价', '全部评价']
    const [checked, setChecked] = React.useState(false)
    const [checked1, setChecked1] = React.useState(false)
    const pan = useMemo(()=>{
        if(checked1){
            return false
        }else{
            return true
        }
    })
    
    return (
        <div className={styles.main}>
            <div className={styles.head}>
                <ArrowLeft style={{ marginLeft: '0.2rem' }} onClick={() => { navigate('/shou/main') }} />
                <p style={{ fontSize: '0.22rem' }}>顾客评价</p>
                <p style={{ marginRight: '0.1rem' }}>
                    <AppsO />
                </p>
            </div>
            <div className={styles.center}>
                <p style={{ fontSize: '0.4rem', color: 'red' }}>4.5</p>
                <div style={{ marginRight: '0.5rem' }}>
                    <Rate allowHalf value={value} onChange={setValue} />
                    <p style={{ fontSize: '0.15rem' }}>根据最近90天的评价计算所得</p>
                </div>
                <p>更多<Arrow /></p>
            </div>
            <div className={styles.body1}>
                <Tabs defaultActive={2}>
                    {items.map(item => (
                        <Tabs.TabPane key={item} title={`${item}`}>
                        </Tabs.TabPane>
                    ))}
                </Tabs>
                <Space wrap gap={[10, 20]} style={{ marginLeft: '0.16rem', marginTop: '0.3rem', marginBottom: '0.25rem' }}>
                    <div style={{ width: '1.2rem', height: '0.3rem', border: '1px solid', borderRadius: '0.06rem', textAlign: 'center' }} className={styles.bei}>全部(5)</div>
                    <div style={{ width: '1.2rem', height: '0.3rem', border: '1px solid', borderRadius: '0.06rem', textAlign: 'center' }}>五星(1)</div>
                    <div style={{ width: '1.2rem', height: '0.3rem', border: '1px solid', borderRadius: '0.06rem', textAlign: 'center' }}>四星(4)</div>
                    <div style={{ width: '1.2rem', height: '0.3rem', border: '1px solid', borderRadius: '0.06rem', textAlign: 'center' }}>三星(0)</div>
                    <div style={{ width: '1.2rem', height: '0.3rem', border: '1px solid', borderRadius: '0.06rem', textAlign: 'center' }}>二星(0)</div>
                    <div style={{ width: '1.2rem', height: '0.3rem', border: '1px solid', borderRadius: '0.06rem', textAlign: 'center' }}>一星(0)</div>
                </Space>
                <div style={{ display: 'flex', marginLeft: '0.15rem' }}>
                    <Checkbox checked={checked} onChange={setChecked}>
                        有内容的评价
                    </Checkbox>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Checkbox checked={checked1} onChange={setChecked1}>
                        有图片的评价
                    </Checkbox>
                </div>
            </div>
            
            <div className={styles.foot1}>
                <div className={styles.foot1_head}>
                    <img src="/imgs/tx1.png" alt="" style={{ width: '0.5rem', borderRadius: '50%' }} />
                    <div style={{ marginRight: '1rem' }}>
                        <p>匿名用户</p>
                        <p>2024-10-10</p>
                    </div>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p>详情<Arrow /></p>
                </div>        
                <div className={styles.foot1_body}>
                        <div className={styles.wenzi}>
                        <p>商家：<Rate allowHalf value={value2} onChange={setValue2} />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>味道五星</span>&nbsp;&nbsp;&nbsp;
                        <span>包装五星</span>
                        </p>
                        <br />
                        <p>
                            推荐：牛肉拌面、红烧狮子头、西湖醋鱼、白灼小虾
                        </p>
                        <br />
                        <p>
                        一如既往的不错，比较清淡，适合南方人口味，我堂食买的一样。
                        </p>
                        </div>
                        <div className={styles.tupian}>
                            <img src="/imgs/food1.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                            <img src="/imgs/food2.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                            <img src="/imgs/food3.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                            <img src="/imgs/food3.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                        </div>
                        <button className={styles.btn}>回复</button>
                </div>
            </div>
            {pan?<div className={styles.foot2}>
                <div className={styles.foot1_head}>
                    <img src="/imgs/tx1.png" alt="" style={{ width: '0.5rem', borderRadius: '50%' }} />
                    <div style={{ marginRight: '1rem' }}>
                        <p>匿名用户</p>
                        <p>2024-10-10</p>
                    </div>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p>详情<Arrow /></p>
                </div>
                <div className={styles.foot1_body}>
                        <div className={styles.wenzi}>
                        <p>商家：<Rate allowHalf value={value1} onChange={setValue} />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>味道四星</span>&nbsp;&nbsp;&nbsp;
                        <span>包装五星</span>
                        </p>
                        <br />
                        <p>
                            推荐：牛肉拌面、红烧狮子头、西湖醋鱼、白灼小虾
                        </p>
                        <br />
                        <p>
                        一如既往的不错，比较清淡，适合南方人口味，我堂食买的一样。
                        </p>
                        </div>
                        
                        <button className={styles.btn}>回复</button>
                </div>
            </div>:''}
            {pan?<div className={styles.foot2}>
                <div className={styles.foot1_head}>
                    <img src="/imgs/tx1.png" alt="" style={{ width: '0.5rem', borderRadius: '50%' }} />
                    <div style={{ marginRight: '1rem' }}>
                        <p>匿名用户</p>
                        <p>2024-10-10</p>
                    </div>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p>详情<Arrow /></p>
                </div>
                <div className={styles.foot1_body}>
                        <div className={styles.wenzi}>
                        <p>商家：<Rate allowHalf value={value1} onChange={setValue} />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>味道四星</span>&nbsp;&nbsp;&nbsp;
                        <span>包装五星</span>
                        </p>
                        <br />
                        <p>
                            推荐：牛肉拌面、红烧狮子头、西湖醋鱼、白灼小虾
                        </p>
                        <br />
                        <p>
                        一如既往的不错，比较清淡，适合南方人口味，我堂食买的一样。
                        </p>
                        </div>
                        
                        <button className={styles.btn}>回复</button>
                </div>
            </div>:''}
            <div className={styles.foot1}>
                <div className={styles.foot1_head}>
                    <img src="/imgs/tx1.png" alt="" style={{ width: '0.5rem', borderRadius: '50%' }} />
                    <div style={{ marginRight: '1rem' }}>
                        <p>匿名用户</p>
                        <p>2024-10-10</p>
                    </div>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p>详情<Arrow /></p>
                </div>
                <div className={styles.foot1_body}>
                        <div className={styles.wenzi}>
                        <p>商家：<Rate allowHalf value={value1} onChange={setValue} />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>味道四星</span>&nbsp;&nbsp;&nbsp;
                        <span>包装五星</span>
                        </p>
                        <br />
                        <p>
                            推荐：牛肉拌面、红烧狮子头、西湖醋鱼、白灼小虾
                        </p>
                        <br />
                        <p>
                        一如既往的不错，比较清淡，适合南方人口味，我堂食买的一样。
                        </p>
                        </div>
                        <div className={styles.tupian}>
                            <img src="/imgs/food1.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                            <img src="/imgs/food2.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                            <img src="/imgs/food3.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                            <img src="/imgs/food3.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                        </div>
                        <button className={styles.btn}>回复</button>
                </div>
            </div>
            <div className={styles.foot1}>
                <div className={styles.foot1_head}>
                    <img src="/imgs/tx1.png" alt="" style={{ width: '0.5rem', borderRadius: '50%' }} />
                    <div style={{ marginRight: '1rem' }}>
                        <p>匿名用户</p>
                        <p>2024-10-10</p>
                    </div>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p>详情<Arrow /></p>
                </div>
                <div className={styles.foot1_body}>
                        <div className={styles.wenzi}>
                        <p>商家：<Rate allowHalf value={value1} onChange={setValue} />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>味道四星</span>&nbsp;&nbsp;&nbsp;
                        <span>包装五星</span>
                        </p>
                        <br />
                        <p>
                            推荐：牛肉拌面、红烧狮子头、西湖醋鱼、白灼小虾
                        </p>
                        <br />
                        <p>
                        一如既往的不错，比较清淡，适合南方人口味，我堂食买的一样。
                        </p>
                        </div>
                        <div className={styles.tupian}>
                            <img src="/imgs/food1.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                            <img src="/imgs/food2.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                            <img src="/imgs/food3.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                            <img src="/imgs/food3.png" alt="" style={{width:'0.8rem',height:'0.8rem',borderRadius:'0.1rem'}}/>
                        </div>
                        <button className={styles.btn}>回复</button>
                </div>
            </div>
            
            
        </div>
    )
}
